<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>15</title>
</head>

<body class="page12">
    <p>要使用的图像：</p>
    <img id="tulip" src="1.jpg" alt="">

    <p>画布：</p>
    <canvas id="drawing" width=" 500" height="400" style="border:1px solid #d3d3d3;background:#ffffff;">A drawing of something.</canvas>

    <script>
        var EventUtil = {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
            getEvent: function(event) {
                return event ? event : window.event;
            },
            getTarget: function(event) {
                return event.target || event.srcElement;
            },
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            }
        };

        var drawing = document.getElementById("drawing");
        //确定浏览器支持<canvas>元素
        if (drawing.getContext) {
            var context = drawing.getContext("2d");
            //绘制红色矩形
            context.fillStyle = "#ff0000";
            context.fillRect(10, 10, 50, 50);
            //设置合成操作
            //后绘制的图形位于先绘制的图形下方
            context.globalCompositeOperation = "destination-over";
            //绘制蓝色矩形
            context.fillStyle = "rgba(0,0,255,1)";
            context.fillRect(30, 30, 50, 50);
        }

        function handleKeyPress(event) {
            event = EventUtil.getEvent(event);
            if (event.keyCode == 13) {
                var target = EventUtil.getTarget(event);
                var value = 5 * parseInt(target.value);
                if (value > 10) {
                    document.getElementById("error-msg").style.display = "block";
                }
            }
        }

        function validateValue(value) {
            value = 5 * parseInt(value);
            if (value > 10) {
                document.getElementById("error-msg").style.display = "block";
            }
        }

        function handleKeyPress(event) {
            event = EventUtil.getEvent(event);
            if (event.keyCode == 13) {
                var target = EventUtil.getTarget(event);
                validateValue(target.value);
            }
        }
        //
    </script>
</body>

</html>